<template>
  <v-navigation-drawer v-model="drawer" app>
    <v-list-item>
      <v-list-item-avatar>
        <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
      </v-list-item-avatar>

      <v-list-item-title>
        康仔码头
      </v-list-item-title>
    </v-list-item>

    <v-divider></v-divider>

    <v-list
        dense
        nav>
      <v-list-item-group
          v-model="selectedItem"
          color="primary"
      >
        <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            :to="item.to">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: "AppBar",

  data: () => ({
    selectedItem: 0,
    items: [
      {title: 'Home', icon: 'mdi-view-dashboard', to: '/'},
      {title: 'About', icon: 'mdi-help-box', to: '/about'},
    ],
    drawer: true,
  }),
  methods: {
    unDrawer() {
      this.drawer = !this.drawer;
    }
  }
}
</script>

<style scoped>

</style>